import React, {PureComponent} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
import baseChart from '../chart/base-chart'
import {setTitle, scale, tooltip, baseTextStyle,colors} from '../chart/util/common'
import {connect} from 'react-redux'

class Bar extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.schedulingStat !== this.props.schedulingStat
    }

    renderDate = (data) => {
        const schedulingStat = data.toJS()
        return [schedulingStat.all, schedulingStat.completed]
    }

    componentWillUpdate(nextProps) {
        const data = this.renderDate(nextProps.schedulingStat)
        this.myChart.setOption({
            series: [
                {
                    data
                }
            ],
        });
    }

    componentDidMount() {
        const {setChartInstance} = this.props
        const data = this.renderDate(this.props.schedulingStat)
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const option = {
            title: setTitle({text: '最近一期排产计划完成情况'}),
            color: ['#ffff0a', '#00dad2', '#9200cf'],
            tooltip: {
                ...tooltip,
                show: true,
                trigger: 'axis',
                formatter: function (params) {
                    let relVal = params[0].name;
                    relVal += params[0].value;
                    return relVal;
                },

                showDelay: 0,
                hideDelay: 50,
                transitionDuration: 0,
                backgroundColor: 'rgba(50,50,50,1)',
                borderColor: '#aaa',
                showContent: true,
                borderRadius: 8,
                padding: 10
            },
            axisPointer: {
                type: 'line',
                axis: 'auto'
            },
            xAxis: {
                data: ['任务令数', '完工数量'],

                axisLine: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    showMaxLabel: true,
                    showMinLabel: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            grid: {
                left: '5%',
                right: '15%',
                top: 50 * scale,
                bottom: '5%',
                containLabel: true
            },
            yAxis: {
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '',
                type: 'bar',
                barMaxWidth: 30 * scale,
                data: data,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex]
                        }
                    },
                },
            }],
            label: {
                normal: {
                    ...baseTextStyle,
                    show: true,
                    position: 'top'

                }
            }

        };
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div className="scheduling-chart-bar" ref='chart'/>
        )
    }

}

function mapStoreToProps({schedulingStat}) {
    return {
        schedulingStat
    }
}


export default baseChart(connect(mapStoreToProps)(Bar))